<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-input v-model="searchForm.school_name" placeholder="请输入学校名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="searchForm.type" placeholder="请选择类型" clearable>
            <el-option label="普通用户" :value="1"></el-option>
            <el-option label="配送员" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="不用审核" :value="0"></el-option>
            <el-option label="未认证" :value="1"></el-option>
            <el-option label="认证通过" :value="2"></el-option>
            <el-option label="认证未通过" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="search(true)">搜索</el-button>
          <el-button type="success" @click.stop="search">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="拒绝理由:">
                <span>{{ props.row.remark }}</span>
              </el-form-item>
              <el-form-item label="身份证号码:">
                <span>{{ props.row.idcard }}</span>
              </el-form-item>
              <el-form-item label="身份证正面:">
                <span>
                  <el-image style="width: 100px; height: 100px" :src="props.row.idcard_front" :preview-src-list="[props.row.idcard_front]">
                  </el-image>
                </span>
              </el-form-item>
              <el-form-item label="身份证背面:">
                <span>
                  <el-image style="width: 100px; height: 100px" :src="props.row.idcard_reverse" :preview-src-list="[props.row.idcard_reverse]">
                  </el-image>
                </span>
              </el-form-item>
              <el-form-item label="手持身份证:">
                <span>
                  <el-image style="width: 100px; height: 100px" :src="props.row.idcard_hold" :preview-src-list="[props.row.idcard_hold]">
                  </el-image>
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="真实姓名"></el-table-column>
        <el-table-column prop="phone" label="电话号码"></el-table-column>
        <el-table-column prop="school_name" label="学校"></el-table-column>
        <el-table-column prop="dormitory_name" label="宿舍"></el-table-column>
        <el-table-column prop="floor_name" label="楼层"></el-table-column>
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            {{genderName(scope.row.gender)}}
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{typeName(scope.row.type)}}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{statusName(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column prop="is_system_order_taking" label="系统接单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.is_system_order_taking == -1" style="color: #E6A23C">---</span>
            <span v-if="scope.row.is_system_order_taking == 0 || scope.row.is_system_order_taking == 1">
              <el-tooltip :content="scope.row.is_system_order_taking == 0 ? '启用': '禁用'" placement="top" :enterable="false">
                <el-switch v-model="scope.row.is_system_order_taking" :active-value="1" :inactive-value="0"
                  @change="isSystemChange(scope.row,scope.row.is_system_order_taking)">
                </el-switch>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="添加时间" width="150">
          <template slot-scope="scope">
            {{timeFormat(scope.row.create_time)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button v-if="(scope.row.status == 1|| scope.row.status == 2|| scope.row.status == 3) && scope.row.type == 2" type="text" size="small"
              @click="changeStatus(scope.row.id)">审核
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
          :page-sizes="[10,20,30,40]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
      </div>
      <el-dialog title="认证用户" :visible.sync="checkVisible" width="400px" :before-close="handleClose('checkForm')">
        <el-form ref="checkForm" :model="checkForm" label-width="100px" size="small" :rules="rules">
          <el-form-item label="是否通过" prop="status">
            <el-radio-group v-model="checkForm.status" @change="btnChange">
              <el-radio :label="2" border>认证通过</el-radio>
              <el-radio :label="3" border>认证不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="checkForm.status ==3" label="不通过理由" prop="remark">
            <el-input v-model="checkForm.remark" placeholder="请输入理由"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('checkVisible', 'checkForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('checkVisible','checkForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { formatDate } from '@/untils/common.js'
import { userList, editUser, orderTakingChange } from '@/network/api.js'

export default {
  name: 'user',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        school_name: '',
        type: '',
        status: ''
      },
      count: 0, // 总记录数
      table: [],
      checkForm: {
        id: 0,
        status: 2,
        remark: ''
      },
      checkVisible: false, // 审核表单
      bindForm: {
        user_id: 0,
        delivery_floor: '',
        school_id: 0,
        dormitory_id: 0,
        floor_id: 0
      },
      bindVisible: false, // 绑定配送楼层
      floorList: [],

      rules: {
        status: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
        delivery_floor: [{ required: true, message: '请选择楼层', trigger: 'blur' }],
        remark: [
          {
            validator: (rule, value, callback) => {
              if (this.checkForm.status === 3 && value === '') {
                callback(new Error('请输入理由'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.search(true)
  },
  computed: {
    genderName() {
      return gender => {
        switch (gender) {
          case 0:
            return '男生'
          case 1:
            return '女生'
        }
      }
    },
    statusName() {
      return status => {
        switch (status) {
          case 0:
            return '不用审核'
          case 1:
            return '未认证'
          case 2:
            return '认证通过'
          case 3:
            return '认证未通过'
        }
      }
    },
    typeName() {
      return type => {
        switch (type) {
          case 1:
            return '普通用户'
          case 2:
            return '配送员'
        }
      }
    },
    timeFormat() {
      return time => {
        return formatDate(time)
      }
    }
  },
  methods: {
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await userList(this.searchForm)
        this.table = rtn.data.data
        this.count = rtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    // 修改状态
    changeStatus(id) {
      this.checkForm.id = id
      this.checkVisible = true
    },
    async isSystemChange(row) {
      try {
        await orderTakingChange({ id: row.id, is_system_order_taking: row.is_system_order_taking })
      } catch (e) {
        row.is_system_order_taking = row.is_system_order_taking === 1 ? 0 : 1
        this.$message.error(e.message)
      }
    },
    btnChange(value) {
      this.checkForm.remark = ''
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose(formName) {
      return done => {
        this.$refs[formName].resetFields()
        done()
      }
    },
    // 取消按钮
    close(visibleName, formName) {
      this.$refs[formName].resetFields()
      this[visibleName] = false
    },
    send(visibleName, formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          switch (formName) {
            case 'checkForm': // 审核表单
              try {
                await editUser(this.checkForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
